<template>
<div class='Navcontainer'>
<div class='content'>
  <ul class="nav">
    <li class='first'><a>推荐</a></li>
    <li><a>排行榜</a></li>
    <li><a>歌单</a></li>
    <li><a>主播电台</a></li>
    <li><a>歌手</a></li>
    <li><a>新碟上架</a></li>
  </ul>
</div>
</div>
</template>

<script>
export default {
  name: 'Nav'
}
</script>

<style scoped>
.Navcontainer{
  width: 100%;
  background-color: #C20C0C;
}
.content{
  width: 1100px;
  height: 35px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.nav {
  margin-left: 175px;
}
.content ul {
  display: flex;
  align-items: center;
  height: 100%;
}
.content ul li{
  width: 84px;
  text-align: center;
  height: 20px;
  line-height: 21px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.content ul li a{
  display: block;
  height: 100%;
  color: white;
  width: 100%;
  font-size: 12px;
}
.content ul li:hover{
  background-color: #9B0909;
  border-radius: 20px;
}
.first{
  background-color: #9B0909;
  border-radius: 20px;
}
</style>